<template>
  <div class="info-box">
    <div class="header">
      <p class="sup-title">人防疏散地域系统</p>
      <p class="sub-title">（南皮县指挥点）</p>
    </div>
    <ul>
      <li>
        <span>疏散家庭联系人：</span>
        <span>{{ detailInfo.ename }}</span>
      </li>
      <li>
        <span>疏散家庭联系电话：</span>
        <span>{{ detailInfo.ephone }}</span>
      </li>
      <li>
        <span>疏散人数：</span>
        <span>{{ detailInfo.enum }}</span>
      </li>
      <li>
        <span>安置家庭联系人：</span>
        <span>{{ detailInfo.pname }}</span>
      </li>
      <li>
        <span>安置人员手机号：</span>
        <span>{{ detailInfo.pphone }}</span>
      </li>
      <li>
        <span>安置家庭人数：</span>
        <span>{{ detailInfo.pnum }}</span>
      </li>
      <li>
        <span>填写实到人数</span>
      </li>
      <li class="people-num">
        <van-field
          placeholder="请填写实到人数"
          v-model="peopleNum"
          input-align="center"
        />
      </li>
    </ul>
    <div class="submit-btn" @click="submit()">提交</div>

  </div>
</template>
<script>
import { Field } from "vant";
import { submit } from "@/api/user";
import { Toast } from "vant";
export default {
  name: "InfoPage",
  components: {
    [Field.name]: Field
  },
  data(){
    return {
      detailInfo: {},
      peopleNum: null
    }
  },
  mounted() {
    this.detailInfo = JSON.parse(localStorage.getItem('detailData'))
  },
  methods: {
    submit() {
      if (this.peopleNum === '') {
        Toast.fail('请填写实到人数')
        return false
      }
      let obj = {
        uid: this.detailInfo.ppid,
        num: Number(this.peopleNum)
      }
      submit(obj).then(res => {
        Toast.success('提交成功')
      })
    }
  }
};
</script>
<style lang="scss" scoped>
.info-box {
  width: 100%;
  min-height: 100vh;
  background-color: #f0f2f5;
  > ul {
    padding: 0 1rem;
    margin-top: 0.8rem;
    > li {
      font-size: 16px;
      margin-bottom: 20px;
      font-weight: 500;
    }
  }
  .people-num {
    .van-cell {
      background-color: #f0f0f0;
    }
  }
}
.header {
  width: 100%;
  padding: 1rem 0 0.1rem 0;
  text-align: center;
  p {
    color: #333;
  }
  .sup-title {
    font-size: 22px;
    font-weight: 700;
  }
  .sub-title {
    font-size: 16px;
  }
}
.submit-btn {
  height: 35px;
  line-height: 35px;
  text-align: center;
  color: #fff;
  background-color: #1989fa;
  border: 1px solid #1989fa;
  border-radius: 1rem;
  width: 50%;
  margin: 0 auto;
  font-size: 14px;
}
</style>
